<style>
</style>
<div  class="layui-card">
    <!---->
    <div class="layui-header notselect">
        <div class="pull-left"><span>商品</span></div>
        <div class="pull-right margin-right-15 nowrap">
            <button data-modal="/shop/goods/addGoods" data-title="添加商品"
                    class="layui-btn layui-btn-sm layui-btn-primary">添加商品
            </button>
        </div>
    </div>
    <div class="layui-card-body">
        <form id="goodApp" autocomplete="off" class="layui-form layui-form-pane form-search" onsubmit="return false;">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品品牌</label>
                <div class="layui-input-inline">
                    <select name="brandId" lay-search v-model="brandId">
                        <option value="">请选择</option>
                        <option :value="brand.id" v-for="brand in brands">{{brand.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-inline">
                    <select name="classifyId" v-model="classifyId"  lay-search>
                        <option value="">请选择</option>
                        <option :value="classify.id" v-for="classify in classifies" value="{{classify.id}}">{{classify.name}}</option>
                    </select>
                </div>
            </div>
            <#--<div class="layui-form-item layui-inline">-->
                <#--<label class="layui-form-label">栏目</label>-->
                <#--<div class="layui-input-inline">-->
                    <#--<select name="columnId" lay-search>-->
                        <#--<option value="">请选择</option>-->
                    <#--</select>-->
                <#--</div>-->
            <#--</div>-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" lay-search v-modal="status">
                        <option value="">请选择</option>
                        <option value="1">出售中</option>
                        <option value="0">待售</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-inline">
                    <input v-model="code"  placeholder="编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品名</label>
                <div class="layui-input-inline">
                    <input v-model="goodsName"  placeholder="商品名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary" @click="doGoodsSearch()"><i
                            class="layui-icon">&#xe615;</i>
                    搜 索
                </button>
            </div>
        </form>
        <script type="text/html" id="barTool">
            {{#  if(d.sale===0){ }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="up">上架</a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="down">下架</a>
            {{#  } }}
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script type="text/html" id="imageTemplate">
            <img width="40px" height="40px" src="{{ d.thumbnail }}" data-tips-image="{{ d.thumbnail }}"/>
        </script>
        <script type="text/html" id="bcTemplate">
            品牌：{{ d.brandName }}
            <br/>
            分类：{{ d.classifyName }}
            <br/>
            {{#  if(d.colunmName!=undefined){ }}
            栏目：{{ d.colunmName }}
            {{#  } else { }}
            栏目：无
            {{#  } }}
        </script>
        <script type="text/html" id="infoTemplate">
            <table class="think-inner-table layui-table">
                <tbody>
                {{# layui.each(d.goodsSpecList, function(index, item){ }}
                <tr>
                    <td>
                        <span class="layui-badge layui-bg-gray">{{item.name}}</span>
                    </td>
                    <td class="text-right nowrap">
                        <span class="layui-badge layui-bg-gray">售 {{item.salePrice}} ( 市 {{item.marketPrice}} ) </span>
                        <span class="layui-badge layui-bg-gray">存 {{item.stock}} ( 剩 {{item.surplusNum}}, 售 {{item.saleNum}} ) </span>
                    </td>
                </tr>
                {{# }); }}
                </tbody>
            </table>
        </script>
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
            </div>
        </script>
        <script type="text/html" id="saleTemplate">
            {{#  if(d.sale===0){ }}
            <span style="color: red;">已下架</span>
            {{#  } else { }}
            <span style="color: green;">出售中</span>
            {{#  } }}
        </script>
        <table class="layui-hide" id="goodsTable" lay-filter="goodsTable"></table>
    </div>
</div>
<script>
    require(['jquery', 'ckeditor', 'vue'], function (jquery, ckeditor, Vue) {
        var vue=new Vue({
            el: '#goodApp',
            data: {
                brandId:'',
                classifyId:'',
                status:'',
                code:'',
                goodsName:'',
                brands:[],
                classifies:[],
            },
            created: function () {
                this.brands = $.getBrand;
                this.classifies = $.getClassify;
            },
            methods:{
                gernerateId: function (name,index){
                    return name+"_" +index
                },
                doGoodsSearch:function () {
                    initGoods({brandId:this.brandId,classifyId:this.classifyId,status:this.status,goodsName:this.goodsName});
                }
            }
        })
        var table;
        layui.use('table', function () {
            table = layui.table;
        });
        window.form.render();
        window.form.on('select', function(data){
            if(data.elem.name=="brandId") {
                vue.brandId=data.value;
            }
            if(data.elem.name=="classifyId") {
                vue.classifyId=data.value;
            }
            if(data.elem.name=="status") {
                vue.status=data.value;
            }
        });
        initGoods({});
        function initGoods(data) {
            table.render({
                elem: '#goodsTable'
                , url: '/shop/goods/ajax_list'
                , title: '用户数据表'
                , totalRow: true
                , page: true
                , id: 'idTest'
                , cols: [[
                    {field: 'sort', title: '排序值'}
                    , {field: 'bc', title: '品牌分类', templet: '#bcTemplate'}
                    , {field: 'name', title: '名称'}
                    , {field: 'thumbnail', title: '缩略图', templet: '#imageTemplate'}
                    , {field: 'info', title: '商品信息', templet: '#infoTemplate'}
                    , {field: 'sale', title: '状态', templet: '#saleTemplate'}
                    , {fixed: 'right', title: '操作', toolbar: '#barTool'}
                ]]
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                },
                where: data
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    console.info(res)
                    return {
                        "code": res.errorCode, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.totalElements, //解析数据长度
                        "data": res.data.rows //解析数据列表
                    };
                }
            });
            //监听行工具事件
            table.on('tool(goodsTable)', function (obj) {
                var data = obj.data;
                console.log(data)
                if (obj.event === 'del') {
                    layer.confirm('真的删除？', function (index) {
                        $.form.load("/shop/goods/ajax_del", {id: data.id});
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    transData.id = data.id;
                    $.form.modal("/shop/goods/editGoods", {id: data.id}, "编辑");
                }
                else if(obj.event==='up') {
                    layer.confirm('确认上架？', function (index) {
                        $.form.load("/shop/goods/ajax_shelf", {id:data.id,status:1});
                        layer.close(index);
                    });
                }
                else if(obj.event==='down') {
                    layer.confirm('确认下架？', function (index) {
                        $.form.load("/shop/goods/ajax_shelf", {id:data.id,status:0});
                        layer.close(index);
                    });
                }
            });
        }
    })
</script>